<template>
  <div>
    <p>管理员信息</p>
    <p>管理员ID:{{ id }}</p>
    <p>账号:{{ account }}</p>
    <p>用户组:{{ usergroup }}</p>
    <p>创建时间:{{ date }}</p>
<div>
 <span>用户头像</span><el-upload
  class="avatar-uploader"
  action="http://127.0.0.1:5000/users/avatar_upload"
  :show-file-list="false"
  :data="{id:myid}"
  :on-success="handleAvatarSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
  </div>
</template>

<script>
 import { getaccoundInfor } from "@/apis/users";
 import {getYYYYMMDD}  from "@/utils/utile"
export default {
  data() {
    return {
          id: "",
          account: "",
          usergroup: "",
          date: "",
          imageUrl: '' 
    };
  },
  computed:{
    myid(){
      return localStorage.id
    }
  },
  methods:{
        handleAvatarSuccess(res, file){
        this.imageUrl = URL.createObjectURL(file.raw);
          //监听bus,需要两个参数,第一个参数是自定义的事件,第二个参数是要传的东西
      this.$bus.emit('handleAvatarSuccess',res)
// console.log(res);
      }
  },
  created() {
    getaccoundInfor({ id: localStorage.id }).then((res) => {
      // console.log(res.data);
      let { account, ctime, imgUrl ,userGroup} = res.data.accountInfo;
      this.account = account;
      this.usergroup=userGroup
      this.date = getYYYYMMDD(ctime)  ;
      this.imageUrl = imgUrl;
    
    });
  },
}
</script>

<style lang="less">
p {
  height: 48px;
  border-bottom: 1px solid #f0f2f5;
  line-height: 48px;
}

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
 width: 160px;
    height: 160px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 160px;
    height: 160px;
    display: block;
  }
</style>